<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>我的消息</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_9pecp3wxz7z7u8fr.css"/>
		<link rel="stylesheet" type="text/css" href="../css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="../css/members.css"/>
	</head>
	<body>
		<ul class="orderMsg">
			<li class="active"><span>系统消息</span></li>
			<em style="border-left: 1px solid #dfdfdf; height: 2rem; margin-top: 1rem;"></em>
			<li><span>订单消息</span></li>
		</ul>
		
		<div class="orderMsgBox">
			<ul class="orderMsgCon">
				
		<div class="noneaddrDiv dn">
			<img src="../images/noneOrder.png" width="66"/>
			<p class="mt10">暂无订单消息</p>
		</div>
		
				<li>
					<p class="orderMsgP">订单已签收</p>
					<div class="msgDiv">
						<span><img src="../images/defaultImg.png"/></span>
						<div class="orderMsgTitle">
							<p>iphone7/7plus 128g  移动／联通／电信三网说通用</p>
							<em>物流编号：762892984772869</em>
						</div>
					</div>
				</li>
				<li>
					<p class="orderMsgP">订单已签收</p>
					<div class="msgDiv">
						<span><img src="../images/defaultImg.png"/></span>
						<div class="orderMsgTitle">
							<p>iphone7/7plus 128g  移动／联通／电信三网说通用</p>
							<em>物流编号：762892984772869</em>
						</div>
					</div>
				</li>
			</ul>
			<ul class="orderMsgCon dn">
				
		<div class="noneaddrDiv dn">
			<img src="../images/noneOrder.png" width="66"/>
			<p class="mt10">暂无订单消息</p>
		</div>
		
				<li>
					<p class="orderMsgP">订单已签收</p>
					<div class="msgDiv">
						<span><img src="../images/defaultImg.png"/></span>
						<div class="orderMsgTitle">
							<p>iphone7/7plus 128g  移动／联通／电信三网说通用</p>
							<em>物流编号：762892984772869</em>
						</div>
					</div>
				</li>
				<li>
					<p class="orderMsgP">订单已签收</p>
					<div class="msgDiv">
						<span><img src="../images/defaultImg.png"/></span>
						<div class="orderMsgTitle">
							<p>iphone7/7plus 128g  移动／联通／电信三网说通用</p>
							<em>物流编号：762892984772869</em>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script>
			$(function(){
				$('.orderMsg').on('click','li',function(){
//					console.log($(this).index());	//因为中间有个em分割线，所有index为0和2
					var idx = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					switch(idx){
						case 0:
						$('.orderMsgCon').eq(idx).removeClass('dn').siblings().addClass('dn');
						break;
						case 2:
						$('.orderMsgCon').eq(idx-1).removeClass('dn').siblings().addClass('dn');
						break;
						default:
						return 0;
					}
				});
			})
		</script>
	</body>
</html>
